<template>
  <div class="box">
    <!-- 登录状态 -->
    <div class="top" v-if="isLogin">
      <div class="xm">
        <!-- 头像 -->
        <span class="tx">
          <van-image round width="5rem" height="5rem" @click="$router.push({ path: '/xinxi' })"
            :src="userInfo.avatar" />
        </span>
      </div>
      <span class="xz">{{ userInfo.nickname }}</span>

      <div class="ziliao">
        <router-link replace to="xinxi">
          <p>编辑资料</p>
        </router-link>
      </div>

      <!-- 头条 获赞 -->
      <div class="tt" @click="me">
        <h3>{{UserList.publish_num}}</h3>
        <p>作品</p>
      </div>
      <div class="hz">
        <h3>{{UserList.liked_num}}</h3>
        <p>获赞</p>
      </div>
      <!-- 下方 -->
      <!-- 收藏 -->
      <div class="bottom" style="margin-top:20px">
        <div class="left" v-if="isLogin">
          <span>
            <van-icon name="star-o" />
          </span>
          <p>收藏</p>
        </div>
        <!-- 历史 -->
        <div class="right" v-if="isLogin" style="text-align:center" @click="goHistory">
          <span>
            <van-icon name="underway-o" />
          </span>
          <p>历史</p>
        </div>
      </div>
    </div>

    <!-- 未登录状态 -->
    <div class="tops" v-else>
      <div class="tp">
        <p>
          <img src="../../public/img/tb.png" @click="dl">
        </p>
        <router-link replace to="login">
          <h3>登录/注册</h3>
        </router-link>
      </div>
    </div>

    <!-- 信息 -->
    <van-cell v-if="isLogin" is-link readonly title="修改密码" @click="xg" style="background:none" />
    <van-cell is-link readonly @click="lx" title="联系我们" style="background:none" />
    <van-cell is-link readonly @click="gy" title="关于我们" style="background:none" />
    <van-cell class="logout-cell" v-if="isLogin" @click="logout" title="退出登录"
      style="background:none;margin-top: 10px;font-size: 17px;color:red;text-align: center;" />


  </div>


</template>

<script>

import { Toast,Image as VanImage ,Dialog} from 'vant';

// 引用 vuex相关的包
import { mapState } from 'vuex';

//接口
import { getUser } from '@/api/api';

export default {
  components: {
    [Toast.name]: Toast,
    [VanImage.name]: VanImage,
    [Dialog.Component.name]: Dialog.Component,
  },
  computed: {
    ...mapState(['userInfo','isLogin','uid','token'])
  },
  data() {
    return {
      message: '',
      value: '',
      active: 0,
      UserList:[]  //用户信息
    }
  },
  created(){
    this.getUserInfo()
  },
  methods: {
    // 获取用户信息
    getUserInfo(){
      getUser({
        token:this.token
      }).then(res=>{
        console.log(111)
        this.UserList = res.data
      })
    },


    async logout() {
      await Dialog.confirm({
        title: '提示',
        message: '您要离开了吗？',
      })
        .then(() => {
          localStorage.clear();
          this.$store.commit('clear')
        })
        .catch(() => {
          // on cancel
        });
    },
    dl() {
      setTimeout(() => {
        this.$router.push('login')
      }, 100);
    },
    // 修改密码页面
    xg() {
      setTimeout(()  => {
        this.$router.push('revise')
      }, 100);
    },
    // 我的发布
    me() {
      setTimeout(()  => {
        this.$router.push('send')
      }, 200);
    },
    // 联系我们
    lx() {
      setTimeout(()  => {
        this.$router.push('contact')
      }, 200);
    },
    // 关于我们
    gy() {
      setTimeout(()  => {
        this.$router.push('about')
      }, 200);
    },

    // 浏览历史
    goHistory(){
      setTimeout(()  => {
        this.$router.push('history')
      }, 200);
    }
  }

}
</script>

<style scoped>
.van-cell {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 2.66667vw 4.26667vw;
  overflow: hidden;
  color: black;
  font-size: 3.93333vw;
  line-height: 6.4vw;
}

button {
  width: 100%;
  height: 45px;
  color: red;
  background: white;
  border: white;
}

/* 未登录版本 */
.tops {
  width: 100%;
  height: 230px;
  background-color: #3399ff;
  overflow: hidden;
  text-align: center;

}

.tops .tp {
  padding-top: 35px;
}

.tops p {
  margin-bottom: 0;
}

.tops p img {
  width: 100px;
}

.tops h3 {
  color: white;
  font-weight: 700;
  margin-top: 3px;
}


.top {
  width: 100%;
  height: 300px;
  background-image: url(../../public/img/bj5.jpg) ;
  background-size:100%;
  overflow: hidden;
}

.top .xm {
  padding: 45px 0 0 20px;
  float: left;
  overflow: hidden;
}

p {
  float: none;
  padding-left: 0;
}

.top .xz[data-v-74054a32] {
  color: white;
  font-size: 20px;
  font-weight: 700;
  position: absolute;
  top: 72px;
  left: 110px;
}


.top .ziliao {
  float: right;
  overflow: hidden;
}

.xm .wz {
  padding-left: 10px;
  color: white;
}

.van-icon-warning-o:before {
  font-size: 25px;
  color: white;
}



.ziliao p {
  margin: 75px 20px 0 0px;
  color: black;
  padding: 3px 6px;
  background: white;
  border-radius: 8px;
  font-size: 10px;
}

/* 头条 获赞 */

.top .tt {
  width: 49%;
  padding-top: 90px;
  text-align: center;
  color: white;
  margin-top: 55px;

}

.tt h3 {
  margin-bottom: 0px;
}

.tt p {
  margin: 0;
}

.top .hz {
  width: 49%;
  float: right;
  text-align: center;
  color: white;
}

.hz h3 {
  margin-top: -40px;
  margin-bottom: 0px;
}

.hz p {
  margin: 0;
}

/* 收藏历史 */
.left {
  width: 49%;
  padding-top: 10px;
  float: left;
  width: 50%;
  text-align: center;
  border-right: 1px solid rgb(215, 214, 214);
}

.left p {
  margin-top: 5px;
  color: white;
}

.van-icon-star-o:before {
  color: #3399ff;
  font-size: 24px;
}

.right {
  width: 49%;
  padding-top: 10px;
  float: right;
  width: 49%;
}

.right p {
  margin-top: 5px;
  color: white;
}

.van-icon-underway-o:before {
  color: #3399ff;

  font-size: 24px;
}

.van-field__label {
  flex: none;
  box-sizing: border-box;
  width: 6.2em;
  margin-right: 3.2vw;
  color: white;
  text-align: left;
  word-wrap: break-word;
}

.van-icon-arrow:before {
  color: black;
}

.dyg {
  margin-top: 90px;
}
</style>